    <!DOCTYPE HTML>  
    <html>  
        <head>  
            <title>EasyBuy后台管理系统</title>  
            <meta charset="utf-8">  
            <style>  
                .main_bar{  
                    width:100%;
                    height:100%;
                    background-color:#6495ED;  
                    margin-top:0%;
                }
                /*中间大黑色灰色的东西*/
                #login_form{  
                    width:40%;
                    height:100%;  
                    background-color:#112435;  /*颜色*/
                    margin:0 auto; /*居中*/
                    margin-top:12%; /*与顶端距离*/
                }
                /*登录系统的标题 黑色部分*/
                .title{  
                    width:100%;
                    color:#ffffff;
                    border-bottom:1px solid #ffffff;  
                    font-size:20pt;  
                    font-family:"微软雅黑";  
                    line-height:55px;  
                    text-align:center;                
                }
                /*登录系统的输入 灰色部分*/
                #form_widget{  
                    width:100%;
                    height:295px;
                    background-color:#808080;  
                }
                /*用户名和密码输入框*/
                .txt{  
                    display:block;/*设置为独立块（换行）*/  
                    width:70%;
                    margin:0 auto;  
                    height:35px;  
                    font-size:15pt;  
                    border-radius:5px;/*设置圆角样式*/  
                    border:0;  
                    padding-left:8px;  
                }
                /*验证码输入框*/
                #vcode{  
                    height:35px;  
                    width:40%;
                    font-size:15pt;  
                    margin-left:15%;  
                    border-radius:5px;  
                    border:0;  
                    padding-left:8px;  
                }
                 /*验证码那堆字母的显示框*/
                #code{
                    color:#ffffff;/*字体颜色白色*/  
                    background-color:#000000;     
                    font-size:20pt;  
                    font-family:"华康娃娃体W5";  
                    padding:5px 35px 10px 35px;  
                    margin-left:5%;
                    cursor:pointer;  
                }
                /*层级选择器*/  
                #search_pass_link a{  
                    color:#000000;
                    text-decoration:none;                 
                }
                /*验证提示位置*/
                #message{
                    width:100%;
                    text-align:left;
                    margin: 5px 80px 5px 75px;
                    padding-left:0%;
                    color:#FC5628;
                }
                 /*忘记密码的位置*/
                #search_pass_link{
                    width: 70%;
                    text-align:left;
{#                    margin:0 auto;#}
                    padding:5px;
                    padding-right:5%;
                }
                /*伪类*/  
                #search_pass_link a:hover{  
                    color:#ff0000;
                    text-decoration:underline;  
                }
                /*登录点击按钮*/
                .btn{  
                    width:35%;
                    margin-left:10%;
                    height:40px;  
                    border:0;  
                    font-size:14pt;  
                    font-family;"微软雅黑";  
                    background-color:#FC5628;  
                    color:#ffffff;  
                    cursor:pointer;/*设置指针鼠标的样式*/  
                    border-radius:20px;/*设置圆角样式*/  
                    border:0;  
                }
                /*注册点击按钮*/
                .btw{
                    width:35%;
                    margin-right:10%;
                    height:40px;
                    border:0;
                    font-size:14pt;
                    font-family;"微软雅黑";
                    background-color:#FC5628;
                    color:#ffffff;
                    cursor:pointer;/*设置指针鼠标的样式*/
                    border-radius:20px;/*设置圆角样式*/
                    border:0;
                }
                /*最后白色字的位置*/
                #copyright{  
                    width:100%;
                    text-align:center;  
                    padding-top:20px;  
                    font-family:"微软雅黑";  
                    color:#e0e0e0;  
                }  
            </style>  
        </head>  
        <body leftmargin="0" onload="changeImg()">  
            <div class="main_bar">   
                <div id="login_form">  
                    <div class="title">  
                        EasyBuy系统登录                   
                    </div>
{#                    <form action="" onsubmit="check()" method="post" type="text/javascript">{{ csrf_token }}#}
                    <div id="form_widget">  
                        <br>
                        <input type="text" placeholder="请输入账号" name="login_name" id="box_name" onclick="click_name()" class="txt" onfocus="this.value=''"/>
                        <br>  
                        <input type="password" placeholder="请输入密码" name="login_password" onclick="click_name()" id="box_pass" class="txt" onfocus="this.value=''"/>
                        <br>  
                        <input type="text" id="vcode" placeholder="验证码" onclick="click_name()" onfocus="this.value=''"/><span id="code" title="看不清，换一张"></span>

                        <div id="search_pass_link">
                            <p id="message" style="color: red;"></p><a href="#"  style="margin-left: 140px;float: right" >忘记密码？</a>

                        </div>
                        <div>
                        <input  type="submit" value="登录" class="btn" onclick="check()" onmouseover="this.style.backgroundColor='#FF8D00'" onmouseout="this.style.backgroundColor='#FC5628'">
                            <input type="button"  value="注册" class="btw" onclick="click_register()" onmouseover="this.style.backgroundColor='#FF8D00'" onmouseout="this.style.backgroundColor='#FC5628'" style="margin-left: 50px;float: right">
                        </div>
                        <br>
                        <div id="copyright">
                            Power By WXH &copy;CopyRight 2016  
                        </div>  
                    </div>
{#                    </form>#}
                </div>  
            </div>      
        </body>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
        <script>
            var code;//声明一个变量用于存储生成的验证码  
            document.getElementById("code").onclick=changeImg;
            //定义验证码
            function changeImg(){  
                //alert("换图片");  
                var arrays=new Array(  
                    '1','2','3','4','5','6','7','8','9','0',  
                    'a','b','c','d','e','f','g','h','i','j',  
                    'k','l','m','n','o','p','q','r','s','t',  
                    'u','v','w','x','y','z'
                );  
                code='';//重新初始化验证码  
                //alert(arrays.length);  
                //随机从数组中获取四个元素组成验证码  
                for(var i=0;i<4;i++){  
                //随机获取一个数组的下标  
                    var r=parseInt(Math.random()*arrays.length);  
                    code+=arrays[r];  
                    //alert(arrays[r]);
                }
                //alert(code);  
                document.getElementById('code').innerHTML=code;//将验证码写入指定区域  
            }         
              
            //点击提交
            function check(){
                //获取用户输入的验证码  
                var input_code=document.getElementById('vcode').value;
                //效验验证码
                if(input_code.toLowerCase()==code.toLowerCase())
                {
                    //效验验证码是否为空
                    if (check123() == true){
                        login()
                    }
                    else {
                        return false;
                    }
                }
                else{
                    document.getElementById("message").innerHTML = '请输入正确的验证';
                    return false;
                }

            }
            function check123(){
                var name1=document.getElementById("box_name").value;
                var pwd1=document.getElementById("box_pass").value;
                if (name1 == '' || pwd1 == ''){
                    document.getElementById("message").innerHTML = '请输入用户名或密码';
                    document.getElementById("box_name").value = '';
                    document.getElementById("box_pass").value = '';
                    return false;
                }
                else {
                    return true;
                }
            }
            function click_name(){
                document.getElementById("message").innerHTML = '';
                return true;
            }
            //注册
            function click_register() {
                 window.location.href="/register/";

            }
            function login() {
                var username = document.getElementById('box_name').value;
                var password = document.getElementById('box_pass').value;
                $.ajax({
                    headers: {"X-CSRFToken": '{{ csrf_token }}'},
                    url: "login_check/",
                    type: 'POST',
                    tradition: true,
                    dataType: 'json',
                    data: {'username': username, 'password': password},
                    success: function (data) {
                        if (data.state == 'success') {
                            document.getElementById("message").innerHTML = '登录成功'
                            window.location.href = data.url
                        } else if (data.state == 'fail') {
                            $('#message').html(data.message)
                            setTimeout(function () {
                                $('#message').html('');
                            }, 3000)
                        }
                    }
                })
            }
        </script>   
    </html>  